<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<base href="${pageContext.request.contextPath}/">
	<title>Title</title>
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/base.css">
	<style>
		label input.layui-input{
			display: inline-block;
			width: 400px;
		}
		label {
			margin-bottom: 20px;
		}
		.subject_item {
			margin-right: 10px;
		}

	</style>
</head>
<body>

<div class="page">
	<form class="layui-form fx-col" action="" lay-filter="abc">
		<input type="hidden" id="id" value=""/>
		<label >考试名称：
			<input type="text" id="name" class="layui-input" value="">
		</label>
		<label >考试时间：

			<input type="text" id="startDate" autocomplete="off" placeholder="开始时间" class="layui-input" value="">
			~
			<input type="text" id="endDate" autocomplete="off" placeholder="结束时间" class="layui-input" value="">

		</label>

		<div id="panel">
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">
					<input type="checkbox" name=""  lay-skin="primary">一年级
				</h2>
				<div class="layui-colla-content layui-show">
					<div class="fx valign-center">

						<div class="subject_item">
							<input type="checkbox" name=""  lay-skin="primary">
							<span>语文</span>
						</div>
						<div class="subject_item">
							<input type="checkbox" name=""  lay-skin="primary">
							<span>数学</span>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">二年级</h2>
				<div class="layui-colla-content layui-show">内容区域</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">三年级</h2>
				<div class="layui-colla-content layui-show">内容区域</div>
			</div>
		</div>
	</form>
	<button class="layui-btn mt-15" id="save_btn">保存</button>
</div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/layui/layui.all.js"></script>
<script src="assets/js/base.js"></script>

<script>

	let id = getUrlParam("id");

	$(function () {

		layui.laydate.render({
			elem: '#startDate' //指定元素
		});
		layui.laydate.render({
			elem: '#endDate' //指定元素
		});


		$(document).on("click", "#save_btn", function () {
			let name = $("#name").val();
			let id = $("#id").val();
			let startDate = $("#startDate").val();
			let endDate = $("#endDate").val();

			if(name == "") {
				layer.msg("请填写考试名称", {icon: 2});
				return;
			}


			let data = {
				"exam":{id, name, startDate, endDate},
				subjects: []
			};
			$(".subject_item input:checkbox:checked").each((i, item) => {
				data.subjects[i] = {subjectId : $(item).val(), gradeId : $(item).data("gradeid")};
			})




			$.ajax({
				url: "exam/save",
				type: "post",
				data: data,
				dataType: "json",
				success(res) {
					if (res.success) {
						layer.msg('保存成功', {icon: 6}, function () {
							window.parent.search();
						});

					} else {
						layer.msg(res.msg, {icon: 2});
					}
				}

			})


		})



		loadGradeData();

		processGradeSubject();



	})


	function loadExamData() {
		if(id <= 0) return;

		$.ajax({
			url: "/exam/getOne?id="+id,
			dataType: "json",
			success: res => {

				let exam = res.data.exam;
				$("#id").val(exam.id);
				$("#name").val(exam.name);
				$("#startDate").val(dateFormat(exam.startDate, "yyyy-MM-dd"));
				$("#endDate").val(dateFormat(exam.endDate, "yyyy-MM-dd"));

				let subjects = res.data.subjects;
				for(let item of subjects) {
					let gradeId = item.gradeId;
					$("#grade"+gradeId).prop("checked", true);
					$("input[name='grade"+gradeId+"'][value='"+item.subjectId+"']").prop("checked", true);

				}

				layui.form.render("checkbox");
			}
		})


	}


	/**
	 * 处理多选框
	 */
	function processGradeSubject() {
		layui.form.on('checkbox()', function(data){
			let checked = data.elem.checked;
			if($(data.elem).hasClass("grade_option")) { //当前变动的是不是年级多选框
				//处理年级checkbox事件
				if(checked) {
					//input[name='grade2']
					$("input[name='grade"+data.value+"']").prop("checked", true);
				} else {
					$("input[name='grade"+data.value+"']").prop("checked", false);
				}
			} else { //当年变动的是 学科多选框
				let gradeid = $(data.elem).data("gradeid");
				if (checked) {
					$("#grade"+gradeid).prop("checked", true);
				} else { //当学科取消勾选时，
					$("#grade"+gradeid).prop("checked", $("input[name='grade"+gradeid+"']:checked").length>0);
				}
			}
			layui.form.render("checkbox");
			// console.log(data.elem); //得到checkbox原始DOM对象
			// console.log(data.elem.checked); //是否被选中，true或者false
			// console.log(data.value); //复选框value值，也可以通过data.elem.value得到
			// console.log(data.othis); //得到美化后的DOM对象
		});
	}


	/**
	 * 加载年级学科数据
	 */
	function loadGradeData() {
		$.ajax({
			url: "grade/list",
			dataType: "json",
			success: res => {
				let grades = res.data;
				let content = '';
				for(let grade of grades) {
					content +=`
						<div class="layui-colla-item">
							<h2 class="layui-colla-title">
								<input type="checkbox" class="grade_option" id="grade${"${grade.id}"}" value="${"${grade.id}"}"  lay-skin="primary">${"${grade.name}"}
							</h2>
							<div class="layui-colla-content layui-show">
								<div id="subject_panel${"${grade.id}"}" class="fx valign-center" >
								</div>
							</div>
						</div>
					`
				}
				$("#panel").html(content);

				loadSubjectData(grades);

			}
		})
	}


	function loadSubjectData(grades) {
		$.ajax({
			url: "subject/list",
			dataType: "json",
			success: res => {
				let subjects = res.data;

				for(let grade of grades) {

					let content = '';
					for(let subject of subjects) {
						content += `
							<div class="subject_item">
								<input type="checkbox" value="${"${subject.id}"}" name="grade${"${grade.id}"}" data-gradeid="${"${grade.id}"}" name=""  lay-skin="primary">
								<span>${"${subject.name}"}</span>
							</div>
						`
					}
					$("#subject_panel" + grade.id).html(content);
				}

				layui.form.render(); //更新全部

				loadExamData();


			}
		})
	}

</script>
</html>
